<template>
    <div class="pageCon">

        <adService adUrl="https://stream7.iqilu.com/10339/article/202002/18/02319a81c80afed90d9a2b9dc47f85b9.mp4"
            name="广告推广" sub="donk"></adService>
        <div class="swiper">
            <el-carousel :interval="5000" arrow="always" height="auto">
                <el-carousel-item v-for="item in swiperList" :key="item" style="height: 700px">
                    <div class="swiperItem" @click="toSwiperDetail(item)">
                        <img :src="item.imgBc" alt="图片加载失败" style="width: 100%;height: 100%">
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="main">
            <HomePara>
                <template #title>
                    <Title :title="'Gâteaux sélectionnés'" :subTitle="'新品推荐'"></Title>
                </template>
                <template #content>
                    <GoodsList :items="recommendList"></GoodsList>
                    <GoMore :toUrl='newCakeUrl' />
                </template>
            </HomePara>
            <HomePara>
                <template #title>
                    <Title :title="'Gâteaux sélectionnés'" :subTitle="'小食精选'"></Title>
                </template>
                <template #content>
                    <GoodsList :items="recommendList"></GoodsList>
                    <GoMore :toUrl='newCakeUrl' />
                </template>
            </HomePara>
            <HomePara>
                <template #title>
                    <Title :title="'Activités à durée limitée'" :subTitle="'限时活动'"></Title>
                </template>
                <template #content>
                    <img class="bigImg"
                        src="https://static.mcake.com//uploads/2024/06/19/0508c3d61eb7d5c46b71a6281356228c54a35f2d.jpg" />
                </template>
            </HomePara>
            <HomePara>
                <template #title>
                    <Title :title="'Gâteaux sélectionnés'" :subTitle="'品牌中心'"></Title>
                </template>
                <template #content>
                    <img class="bigImg"
                        src="https://test.static.mcake.com/uploads/2024/04/22/4f6dc58742f024863ca0921823007521db7a7e24.jpg" />
                </template>
            </HomePara>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import GoodsList from '@/components/GoodsList.vue'
import Title from '@/components/Title.vue'
import GoMore from '@/components/GoMoreBtn.vue'
import HomePara from '@/components/HomeParagraph.vue'
import adService from '@/components/adService.vue'
import { provide, inject } from 'vue'

const swiperList = ref([
    { id: 1, imgBc: 'https://static.mcake.com//uploads/2024/08/19/8e431b3fa2ab40ac0e67d8d20367b1d34e322dec.jpg' },
    { id: 2, imgBc: 'https://static.mcake.com//uploads/2024/08/05/b71e997fff9f21d857b67078607de09ca17c4c7c.jpg' },
    { id: 3, imgBc: 'https://static.mcake.com//uploads/2024/11/15/682aaa687425f2dc4a604fe6a811803d7a3e6da5.jpg' },
    { id: 4, imgBc: 'https://static.mcake.com//uploads/2024/11/26/bcd2430cbb2882f8265bf5fbac3c73589e980c51.jpg' },
])

const recommendList = ref([
    {
        "img": "https://static.mcake.com/new_goods/zhenzinaiyounapolun/list/1.jpg",
        "sku": "C1601",
        "spec": "1.5磅",
        "name": "榛子奶油拿破仑",
        "french": "Napoléon au crème de noisette",
        "title": "榛子奶油拿破仑",
        "subtitle": "Napoléon au crème de noisette",
        "price": "218.00",
        "amount": "218.00",
        "url": "/product/C1601",
        "pcListImg": "https://static.mcake.com//uploads/2024/09/10/492c76c9415d62853dbd111367c5c039bbb17af9.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/23/a2640a357198bb3c9b93c75af96c265aec4545b6.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/04/03/21d07a2d951f665d18f1699f96a72e75ab57ecde.png",
        "sku": "c0301",
        "spec": "1磅",
        "name": "蔓越莓红丝绒",
        "french": "Velour rouge",
        "title": "蔓越莓红丝绒",
        "subtitle": "Velour rouge",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/c0301",
        "pcListImg": "https://static.mcake.com//uploads/2024/04/03/ea4406f1669912b6024c9f733ed78aa6f1fdcc70.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/8fa0663251e43ca00b388f7961c385ae6911a1b9.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/04/03/b481cdc20ab4a22028393da3fd6ecbd0fd9f0d81.png",
        "sku": "C9001",
        "spec": "1磅",
        "name": "榛子奶油",
        "french": "Crème de noisette",
        "title": "榛子奶油",
        "subtitle": "Crème de noisette",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/C9001",
        "pcListImg": "https://static.mcake.com//uploads/2024/04/03/6be9f66eab6d58f9a46d8ef77f1c4b07c68d26af.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/522e3124e4be292c11b761141bd0175341c43235.jpg"
    },
    {
        "img": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
        "sku": "n0301",
        "spec": "1磅",
        "name": "蓝莓轻乳拿破仑",
        "french": "Napoléon aux myrtilles",
        "title": "蓝莓轻乳拿破仑",
        "subtitle": "Napoléon aux myrtilles",
        "price": "198.00",
        "amount": "198.00",
        "url": "/product/n0301",
        "pcListImg": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
        "sceneImg": "https://static.mcake.com//uploads/2024/04/03/179b591e17ff851defe8d9dd8cd0782b89e6f02c.jpg"
    },
])
const { detailInf, updateDetail } = inject('detailInf')
const newCakeUrl = '/cake'

const toSwiperDetail = (item) => {
    updateDetail(item)
}
</script>

<style scoped lang="scss">
.pageCon {
    display: flex;
    flex-direction: column;
    align-items: center;

    .swiper {
        width: 100%;
        min-width: 1200px;
        height: 700px;
        min-height: 700px;
    }

    .main {
        margin-top: 30px;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 40px;

        .bigImg {
            width: 100%;

        }
    }
}
</style>